<template>
  <div>
    <div class="index-3I9NR_0">
      <div @click="_selectCity" class="index-21dnA_0">
        <span class="index-1xJ4H_0">
          {{cityInfo.cityName}}
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 8" class="index-2KCWC_0">
          <path fill="#333" fill-rule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z">
          </path>
        </svg>
      </div>
      <div class="index-2_Jv4_0">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="index-HhHdo_0">
          <path fill-opacity=".38" d="M14.778 13.732a.739.739 0 1 1-1.056 1.036l-2.515-2.565a.864.864 0 0 1-.01-1.206 4.894 4.894 0 0 0 1.357-3.651c-.126-2.492-2.156-4.52-4.648-4.647a4.911 4.911 0 0 0-5.16 5.163c.126 2.475 2.13 4.496 4.605 4.642.451.026.896-.008 1.326-.1a.739.739 0 0 1 .308 1.446c-.56.12-1.137.164-1.72.13-3.227-.19-5.83-2.815-5.995-6.042a6.39 6.39 0 0 1 6.71-6.715c3.25.165 5.884 2.8 6.05 6.048a6.37 6.37 0 0 1-1.374 4.3l2.12 2.161z">
          </path>
        </svg>
        <input v-model="keyword" type="search" placeholder="请输入地址" class="index-2V7cn_0"/>
      </div>
    </div>
    <section sytle v-if="keyword != ''">
      <div class="AddressCell-2WCnC_0" v-for="ad in address">
        <div class="AddressCell-jv0Ry_0" @click="_setNowAddress(ad.name,ad.latitude,ad.longitude)">
          <p>
            <span class="AddressCell-2FRCi_0">
              {{ad.name}}
            </span>
          </p>
          <p class="AddressCell-1hXr8_0">
            {{ad.address}}
          </p>
        </div>
        <div class="AddressCell-3Okww_0">{{ad.distance}}</div>
      </div>
    </section>
  </div>
</template>

<script>

  import {mapGetters} from 'vuex'
  import {getExactAddress} from "api/address/getExactAddress";
  export default {
    name: "address-search",
    data(){
      return {
        keyword:'',
        address:[]
      }
    },
    computed:{
      ...mapGetters({
        cityInfo:'getCityInfo'
      }),
    },
    watch:{
      keyword:function () {
        if(this.keyword!=''){
          console.log(this.keyword);
          this._getExactAddress();
        }
      }
    },
    methods:{
      _selectCity(){
        console.log(this.cityInfo.toString());
        this.$router.push('/address/selectCity');
      },
      _setNowAddress(name,x,y){
        const cityPos = {
          name:name,
          x:x,
          y:y
        }
        this.keyword = name;
        this.$store.commit('setNowAddress',cityPos);
        this.$router.back();
      },
      _getExactAddress(){
        getExactAddress(this.$http,this.cityInfo.latitude,this.cityInfo.longitude,this.keyword).then(
          res => {
            console.log(res.data);
            this.address = res.data;
            console.log(this.address);
          },
          res => {
            console.log("load closed address data fail")
          }
        )
      }
    }
  }
</script>

<style scoped>
  element.style {
    font-size: 36px;
    overflow: hidden;
    height: 100vh;
  }
  .index-3I9NR_0 {
    background-color: #fff;
  }
  .index-3I9NR_0, .index-21dnA_0 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .index-21dnA_0 {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: .4rem;
    padding-left: 4vw;
  }
  .index-1xJ4H_0 {
    font-size: .32rem;
    background: #fff;
    width: 1.066667rem;
    width: 10.666667vw;
    color: #333;
    margin-right: .133333rem;
    margin-right: 1.333333vw;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  .index-2KCWC_0 {
    width: .16rem;
    width: 1.6vw;
    height: .16rem;
    height: 1.6vw;
  }
  .index-2_Jv4_0 {
    position: relative;
    padding: .266667rem .4rem;
    padding: 2.666667vw 4vw;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .index-HhHdo_0 {
    position: absolute;
    width: .373333rem;
    width: 3.733333vw;
    height: .373333rem;
    height: 3.733333vw;
    left: .586667rem;
    left: 5.866667vw;
    top: .56rem;
    top: 5.6vw;
  }
  button, input, select, textarea {
    outline: 0;
    border: none;
    font-size: inherit;
    font-family: inherit;
  }
  .index-2V7cn_0 {
    width: 100%;
    height: .96rem;
    height: 9.6vw;
    color: #999;
    border-radius: .026667rem;
    border-radius: .266667vw;
    padding: .24rem .48rem .24rem .666667rem;
    padding: 2.4vw 4.8vw 2.4vw 6.666667vw;
    background: #f2f2f2;
    -webkit-appearance: none;
  }
  .index-2ljEK_0>h4, .index-2V7cn_0 {
    font-size: .346667rem;
    line-height: .48rem;
    line-height: 4.8vw;
  }

  /*关键字动态匹配结果*/
  .AddressCell-2WCnC_0 {
    font-size: .32rem;
    background-color: #fff;
    padding: .293333rem .4rem;
    padding: 2.933333vw 4vw;
    color: #2a2a2a;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .AddressCell-2WCnC_0 .AddressCell-jv0Ry_0 {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    font-weight: 400;
  }
  .AddressCell-2FRCi_0 {
    font-weight: 700;
    font-size: .4rem;
    color: #333;
  }
  .AddressCell-1EJMW_0 {
    margin-left: .133333rem;
    margin-left: 1.333333vw;
    color: #666;
  }
  .AddressCell-1hXr8_0 {
    color: #333;
    font-size: .32rem;
    line-height: .453333rem;
    line-height: 4.533333vw;
    margin-top: .053333rem;
    margin-top: .533333vw;
  }
  .AddressCell-2WCnC_0 .AddressCell-3Okww_0 {
    width: 1.333333rem;
    width: 13.333333vw;
    text-align: center;
  }
</style>
